<template>
  <a-menu v-model:selectedKeys="currentCategoryIds" mode="horizontal" class="cms-layout-header-categories-menu"
    :selectable="false">
    <a-sub-menu v-for="level1Category in categories" :key="level1Category.info.id" :index="level1Category.info.name">
      <template #title>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span @click="onMenuItemClick(level1Category.info)">{{ level1Category.info.name }}</span>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
      </template>
      <a-menu-item v-for="level2Category in level1Category.childs" :key="level2Category.id">
        <span>
          <span @click="onMenuItemClick(level2Category)">{{ level2Category.name }}</span>
        </span>
      </a-menu-item>
    </a-sub-menu>
  </a-menu>
</template>
<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'CmsHeaderCategoryComponent',
  components: {},
  props: {
    currentCategoryIds: {},
    categories: {},
    clickMenuItem: Function,
  },
  setup(props, context) {
    // 点击菜单项
    function onMenuItemClick(clickCategory) {
      // console.log('CmsMenu onMenuItemClick', clickCategory);

      // props.clickCategory(categoryId);
      context.emit('clickMenuItem', clickCategory);
    }

    return {
      onMenuItemClick,
    };
  },
});
</script>
<style scoped lang="less">
@import './cms.less';

// 导航菜单选中后的文字颜色设置
.ant-menu-horizontal:not(.ant-menu-dark):deep(.ant-menu-submenu span:hover) {
  color: #66b2ff;
}

.ant-menu-horizontal:not(.ant-menu-dark):deep(.ant-menu-submenu-active) {
  color: #66b2ff;
}

.ant-menu-horizontal:not(.ant-menu-dark):deep(.ant-menu-submenu-open) {
  color: #66b2ff;
}
</style>
